<template>
  <div class="app-container">
    <!-- 登录页面布局 -->
    <div v-if="isLoginPage" class="login-layout">
      <router-view />
    </div>
    
    <!-- 主应用布局 -->
    <div v-else class="tech-theme">
      <SciFiHeader />
      <div class="main-container">
        <SciFiSidebar />
        <div class="content-area">
          <router-view v-slot="{ Component }">
            <transition name="fade-slide" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SciFiHeader from '@/components/layout/SciFiHeader.vue'
import SciFiSidebar from '@/components/layout/SciFiSidebar.vue'

const route = useRoute()

// 判断当前是否是登录页面
const isLoginPage = computed(() => {
  return route.name === 'Login'
})
</script>

<style>
@import '@/styles/tech.scss';

/* 登录页面布局 - 全屏居中显示 */
.login-layout {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
}

/* 主布局样式 */
.tech-theme {
  min-height: 100vh;
  background: var(--bg-primary);
}

.main-container {
  display: flex;
  min-height: 100vh;
}

.content-area {
  flex: 1;
  padding: 30px;
  margin-left: 280px; /* 侧边栏宽度 */
  margin-top: 80px; /* 头部高度 */
  min-height: calc(100vh - 80px);
  overflow-y: auto;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 确保登录页面内容居中 */
.login-layout > * {
  width: 100%;
  max-width: 400px;
}
</style>